<template>
  <div
    ref="chartRef"
    class="chart"
    :style="{ width: width, height: height }"
  ></div>
</template>

<script setup>
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  options: {
    type: Object,
    required: true,
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "320px",
  },
});

const chartRef = ref(null);
let chart = null;

const initChart = () => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value);
    chart.setOption(props.options);
  }
};

onMounted(() => {
  initChart();
});

watch(
  () => props.options,
  (newOptions) => {
    if (chart) {
      chart.setOption(newOptions);
    }
  }
);

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
});
</script>
<style lang="scss" scoped>
</style>
